<template>
  <view class="content">
    <view class="top">
      <view class="navbar" :style="{ height: navBarHeight + 'px' }"
        ><text style="font-size: 36upx">星城校园</text></view
      >
      <image
        src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png"
        mode=""
      ></image>
    </view>
    <view>
      <m-swiper :list="banner" :previousMargin="20" :nextMargin="20"></m-swiper>
      <!-- <m-ad :list="adList"></m-ad> -->
      <template
        ><!--v-if="hasLogin == false || (hasLogin && userInfo.memberRole == 0)"-->
        <view class="notice dev-box">
          <yzb-notice
            :list="noticeList"
            theKey="title"
            :showIcon="true"
            :showMore="true"
            @goItem="goItem"
            @goMore="goMore"
          ></yzb-notice>
        </view>
        <view class="dev-box">
          <yzb-grid
            :columnNum="4"
            :data="grid"
            show-border="false"
            @click="handleClickGrid"
          ></yzb-grid>
        </view>

        <view class="title"><view class="bl"></view>{{typeText}}</view>
		<view class="schoolSquare" v-if="type==1">
			<view class="selectBtns" >
				<view :class="currentBtn==index?'selectedBtn':'btn'" @click="changeTab(index)" v-for="(item,index) in btns" :key="index">{{item.name}}</view>
			</view>
			<view class='schoolContent'>
				 <ListCard :contentList="contentList" />
			</view>
		</view>
        <view class="bbb" v-else>
          <yzb-position
            listType="0"
            :positions="list"
            @click="positionDetail"
          ></yzb-position>
        </view>
      </template>
      <view class="load-more-box">
        <uni-load-more
          v-if="status == '请求中'"
          status="正在加载..."
          :showIcon="true"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '没有更多'"
          status="没有更多了"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '暂无数据'"
          status="暂无数据"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '请求失败'"
          status="加载失败，点我重试"
          :showIcon="false"
          @click="reLoad"
        ></uni-load-more>
      </view>
      <uni-popup ref="popup" type="center">
        <view
          style="
            background-color: white;
            width: 80%;
            margin: 0 auto;
            padding: 40upx;
            border-radius: 15upx;
          "
        >
          <view
            class="popupTitle"
            style="
              line-height: 48upx;
              font-size: 30upx;
              font-weight: bold;
              color: #26c947;
            "
            ><image
              src="/static/img/msg.png"
              style="
                width: 48upx;
                height: 48upx;
                margin-right: 12upx;
                vertical-align: sub;
              "
            ></image
            >{{ noticeList[0].title }}</view
          >
          <bctos-rich-text :nodes="noticeList[0].content"></bctos-rich-text>
          <button
            @click="close"
            style="
              background-color: #26c947;
              color: white;
              border-radius: 30upx;
            "
          >
            确认
          </button>
        </view>
      </uni-popup>
	  <chuizi-tabbar :current-page="0"></chuizi-tabbar>
    </view>
	
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import mSwiper from '@/components/m-swiper/m-swiper.vue';
import yzbPosition from '@/components/yzb/yzb-bbb.vue';
import yzbGrid from '@/components/yzb/yzb-grid.vue';
import IMService from '@/lib/imservice';
import amap from '@/common/amap-wx.js';
import ListCard from '@/components/schoolCard/card.vue'
import config from "@/config/index.config.js";
export default {
  components: {
    mSwiper,
    yzbPosition,
    yzbGrid,
	ListCard
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 0,
      topHeight: 0,
	 typeText:'帮帮吧',
      status: '',
      query: {
        current: 1,
        number: 10,
        type: '1',
      },
      banner: [],
      msgIcon: this.$mAssetsPath.msgIcon,
	  contentList:[],
	  currentBtn:0,
	  btns: [
	  	{
	  		name: '推荐',
	  		id:99
	  	},
	  	{
	  		name: '热门',
	  		id:0
	  	},
		
	  	{
	  		name: '同校',
	  		id:1
	  	}
	  ],
      grid: [
        {
          image: this.$mAssetsPath.grid_1,
          text: '闲置广场',
          path: this.$mRoutesConfig.idleSquare,
          type: 1,
        },
		{
		  image: this.$mAssetsPath.grid_3,
		  text: '校园圈',
		  path: this.$mRoutesConfig.index,
		  type: 9,
		},
        {
          image: this.$mAssetsPath.grid_7,
          text: '帮帮吧',
          path: this.$mRoutesConfig.positionList,
          type: 7,
        },
        {
          image: this.$mAssetsPath.grid_8,
          text: '特惠影票',
          path: this.$mRoutesConfig.kf,
          type: 8,
        },
	
      ],
      ka: [],
      adList: [],
      postList: [],
      JobExpectList: [],
      list: [],

      key: '102dcab15e743584f73d383dea7530e7', //高德地图key
      location: undefined, //定位信息

      loadStatus: 'loading', //loading、fail、success
      noticeList: [],
	  type:0
    };
  },
  created() {
    //获取手机状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
    //#ifdef MP-WEIXIN
    this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
    this.topHeight = this.navBarHeight + uni.upx2px(80);
    //#endif
  },
  onLoad(query) {
    this.getBanners();
	this.locationAuth();
    
  },
  //发送给朋友
  onShareAppMessage(res) {
    let that = this;
    if (!this.hasLogin) {
      uni.showToast({
        title: '请先登录，再分享',
        icon: 'none',
      });
      return false;
    }
    return {
      title: '找兼职/找工作，海量岗位放心选',
      path: '/pages/index/index?pcode=' + that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  //分享到朋友圈
  onShareTimeline(res) {
    let that = this;
    return {
      title: '找兼职/找工作，海量岗位放心选',
      path: '/pages/index/index?pcode=' + that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  onShow() {
	  const currentPage = getCurrentPages()[0];
	  console.log("currentPage"+currentPage.route)
    this.locationAuth();
	 
    if (!this.hasLogin) {
      wx.hideShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'],
      });
    } else {
      wx.showShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'],
      });
    }
  },
  onReady() {},
  onPullDownRefresh() {
	  console.log(this.type)
	  if(this.type==1){
		  
		  this.getSchoolSquareList('refresh');
	  }else{
		  this.getDatasByLoc('refresh', true);
	  }
    
  },

  onReachBottom() {
    if (this.status != '没有更多') {
		if(this.type==1){
			this.getSchoolSquareList('add');
		}else{
			this.getDatasByLoc('add');
		}
	}
  },
  methods: {
    positionDetail(item) {
      this.$mRouter.push({
        route: this.$mRoutesConfig.positionDetail,
        query: {
          id: item.id,
        },
      });
    },
    //关闭弹窗
    close() {
      this.$refs.popup.close();
    },
    getPosition() {
      console.log('=========获取定位信息========================');
      const that = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (lb) {
          that.location = {
            latitude: lb.latitude,
            longitude: lb.longitude,
          };
          getApp().globalData.location = that.location;
          getApp().globalData.currentLocation = JSON.parse(
            JSON.stringify(that.location)
          );
          //保存到本地
          that.$db.set('location', that.location);
          that.getDatasByLoc();
        },
        fail: function (error) {
          console.log('=======error=========', error);
          that.getDatasByLoc();
        },
      });
    },
    //需要位置信息的
    getDatasByLoc(type = 'refresh', pulldown = false) {
      if (this.location) {
        this.query.latitude = this.location.latitude;
        this.query.longitude = this.location.longitude;
      }
      this.getPositionList(type, pulldown);
    },
    async getBanners() {
      let param = {
        current: 1,
        number: 10,
      };
      let data = await this.$apis.getBanners(param);
      this.banner = data.banner.banners;
      this.noticeList = data.notice;

      var noticeId = uni.getStorageSync('noticeId');
      console.log(noticeId);
      if (!noticeId || noticeId !== this.noticeList[0].id) {
        this.$refs.popup.open();
        uni.setStorageSync('noticeId', this.noticeList[0].id);
      }
      if (query.pcode) {
        uni.setStorageSync('pcode', query.pcode);
      }
    },

    async getPositionList(type = 'refresh', pulldown = false) {
      this.status = '请求中';
      if (type == 'refresh') {
        this.query.current = 1;
		this.query.type=1;
      } else {
        this.query.current++;
      }
      let data = await this.$apis.IndexbangbUrgentList(this.query);
      console.log(data);
        if (data) {
          if (type == 'refresh') {
            this.list = [];
          }
          if (pulldown) {
            uni.stopPullDownRefresh();
          }
        }

      this.list = this.list.concat(data || []);
      this.changeStatus(data);
    },

    // 修改请求状态
    changeStatus(data) {
      console.log(data);
      if (this.list.length === 0) {
        this.status = '暂无数据';
      } else if (this.query.number > data.length) {
        this.status = '没有更多';
      } else {
        this.status = '请求更多';
      }
    },

    handleClickGrid(o) {
      if (this.grid[o.index].path == '') {
        uni.showToast({ title: '暂未开放', icon: 'none' });
        return;
      }
	  if(o.index==1){
		  console.log(o)
		  this.type=1;
		  this.typeText="校园圈"
		this.getSchoolSquareList();
		  return;
	  }
	  if(o.index==2){
	  		  console.log(o)
	  		  this.type=0;
	  		  this.typeText="帮帮吧";
			  this.locationAuth();
	  		  return;
	  }
	    if (this.grid[o.index].text == '特惠影票') {
			uni.navigateToMiniProgram({
			    appId: 'wx0aac502009322d79', // 填入目标小程序的 appId
			    path: 'pages/movie/movie', // 打开的页面路径，如果为空则打开首页
			    extraData: {
			        // 需要传递给目标小程序的数据
					'promoteCode': '3715000001'
			    },
				 envVersion:'release',
			    success(res) {
			        // 打开成功的回调
			    },
			    fail(err) {
			        // 打开失败的回调
			    }
			});
			
			return;
		}
	  
      this.$mRouter.push({
        route: this.grid[o.index].path,
        query: {
          type: this.grid[o.index].type,
          text: this.grid[o.index].text,
        },
      });
    },

    goItem(item) {
      console.log('goItem', item);

      this.$mRouter.push({
        route: this.$mRoutesConfig.noticeDetail,
        query: {
          id: item.id,
        },
      });
    },

    goMore(item) {
      console.log('goMore', item);
      this.$mRouter.push({
        route: this.$mRoutesConfig.notices,
      });
    },
    /**
     * 位置授权
     */
    locationAuth() {
      let that = this;
      uni.getSetting({
        success(res) {
          if (res.authSetting['scope.userLocation']) {
            console.log('userLocation位置功能已授权');
            that.getPosition();
            // 如果已授权,直接获取对应参数
          } else if (!res.authSetting['scope.userLocation']) {
            // 说明此时要获取的位置功能尚未授权,
            // 则设置进入页面时主动弹出，直接授权
            that.getDatasByLoc();
          }
        },
        fail() {
          console.log('获取授权信息授权失败');
        },
      });
    },
	changeTab(index) {
		if(this.currentBtn!=index){
			this.currentBtn = index;
			this.getSchoolSquareList();
		}
	 },
	  getSchoolSquareList(type = 'refresh'){
		   this.status = '请求中';
		  if(type=='refresh'){
			  this.query={
			    current: 1,
			    number: 10
			  }
		  }else{
			  this.query.current++;
		  }
		  this.query.type=this.currentBtn;
		  uni.request({
		  	url: `${config.baseUrl}/starCityAll/circle/circleQueryList`,
		  	method: "GET",
		  	data: this.query,
		  	dataType: "json",
		  	header: {
		  		"content-type": "application/json",
		  		"Blade-Auth":uni.getStorageSync("token")
		  	},
		  	success: (res) => {
				for(var i in res.data.data){
					console.log(res.data.data[i])
					if(res.data.data[i].url!=null){
						res.data.data[i].url=res.data.data[i].url.split(',')
					}
					
				}
				if(type=='refresh'){
					this.contentList=[];
				}
		  		this.contentList=this.contentList.concat(res.data.data || []);
				this.changeStatus(res.data.data);
		  	}
		  
		  })
	  }
  },
};
</script>

<style lang="scss" scoped>
.top {
  top: 0;
  width: 100%;
  image {
    z-index: -1;
    width: 100%;
    position: fixed;
    top: 0;
  }
}

.navbar {
  height: 100upx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text {
    color: #000;
    font-weight: bolder;
  }
}
.notice {
  margin: 50upx 4% 30upx 4%;
  padding: 0 5upx;
}

.post {
  margin-top: 10upx;
  background-color: #ffffff;
  border-bottom: 20upx solid $border-color-light;
  // border-top: 20upx solid $border-color-light;
  padding-bottom: 20upx;
  .title {
    // font-weight: bold;
    // font-size: $uni-font-size-lg;
    border-bottom: 1rpx solid #f8f8f8;
  }
  .post-list {
    overflow: hidden;
    white-space: nowrap;
    flex-wrap: wrap;
    width: 96%;
    padding: 2%;
  }
  .post-item {
    // background-color: #EEF2FE;
    border: 1upx solid $border-color-base;
    font-size: 28upx;
    float: left;
    width: 20%;
    padding: 10upx 1%;
    border-radius: 8upx;
    margin-top: 20upx;
    text-align: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-item-left {
    margin-left: 3%;
  }

  .all {
    margin-top: 10upx;
    display: flex;
    justify-content: center;
    align-items: center;
    .all-text {
      color: $main-color;
      font-weight: bold;
    }
    .post-next {
      font-size: $font-size-34;
      color: $main-color;
      margin-left: 5upx;
    }
  }
}

.title {
  margin: 20upx 4% 20upx 4%;
  font-weight: bold;
  font-size: $font-size-34;
  line-height: 50upx;
  .bl {
    border-radius: 6upx;
    float: left;
    margin-right: 20upx;
    background-color: #36b957;
    margin-top: 5upx;
    height: 40upx;
    width: 10upx;
  }
}

.expect {
  padding: 25upx 2%;
  margin-top: 20upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  background-color: $bgcolor_white;
  border-bottom: 1upx solid $border-color-base;
  .items {
    width: 85%;
    padding: 0 3%;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    white-space: nowrap;
    align-items: center;
    text {
      padding: 0 10upx;
      font-size: $uni-font-size-lg;
      color: $font-color-base;
    }
    .selected {
      font-weight: bold;
      color: $font-color-000;
      font-size: $font-size-34;
    }
  }
  .expect-icon {
    size: $uni-font-size-lg;
    color: $font-color-gray;
    margin-right: 10upx;
  }
}
.load-more-box {
  // height: 120upx;
}
.schoolSquare{
	margin-bottom:100rpx;
}
.schoolContent{
	padding:10rpx 20rpx;
	
}
.selectBtns{
	margin-left:40rpx;
	width: 300rpx;
	display: flex;
	text-align: center;
	.btn{
		margin:0 20rpx;
		flex:1;
		color:#444;
	}
	.selectedBtn{
		margin:0 10rpx;
		flex:1;
		color:#5FDB7E;
		border-bottom:8rpx solid #5FDB7E;
	}
}
</style>
